<template>
	<div class="app-container">
		<el-row :gutter="10" class="mb8">
			<right-toolbar :showSearch.sync="showSearch" @queryTable="getList" perm="system:vediosetting:list"></right-toolbar>
		</el-row>
		<div :class="sidebar.opened && eleTabTop <= 85 ? 'eleTab' : !sidebar.opened && eleTabTop <= 85 ? 'eleTabs' : ''" class="informationTab" ref="eleTab">
			<el-table v-if="refreshTable" v-loading="loading" :data="postList" row-key="menuId" :default-expand-all="isExpandAll" :tree-props="{ children: 'children', hasChildren: 'hasChildren' }" border height="100%">
				<el-table-column type="selection" width="55" align="center" />
				<el-table-column label="菜单名称" prop="menuName" min-width="130" :show-overflow-tooltip="true" />
				<el-table-column label="操作" align="center" class-name="small-padding fixed-width" fixed="right" width="200">
					<template slot-scope="scope">
						<el-button size="mini" v-if="scope.row.parentId !='0'"   type="text" icon="el-icon-edit" @click="handleAdd(scope.row, 1)" v-hasPermi="['system:vediosetting:edit']">绑定说明</el-button>
						<el-button size="mini" v-if="scope.row.parentId !='0'" type="text" icon="el-icon-edit" @click="handleAdd(scope.row, 2)" v-hasPermi="['system:vediosetting:vedio']">绑定视频</el-button>
					</template>
				</el-table-column>
			</el-table>
		</div>

		<!-- <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize" @pagination="getList" /> -->

		<!-- 添加或修改岗位对话框 -->
		<el-dialog :title="title" :visible.sync="open" width="1200px" append-to-body v-dialogDrag>
			<div class="userDialog">
				<div class="userLeft">
					<el-form :model="queryParamsvedio" size="small" :inline="true">
						<el-form-item label="附件名称" prop="name">
							<el-input style="width: 190px" v-model="queryParamsvedio.name" placeholder="请输入附件名称" maxlength="20" show-word-limit  />
						</el-form-item>
						<el-form-item>
							<el-button type="primary" icon="el-icon-search" size="mini" @click="handleQueryUser">搜索</el-button>
							<el-button icon="el-icon-refresh" size="mini" @click="resetQueryUser">重置</el-button>
						</el-form-item>
					</el-form>
					<el-table ref="leftTable" v-loading="loadingdialog" :data="vedioList" @selection-change="handleSelectionProduct" height="488px" border>
						<el-table-column type="selection" width="50" align="center" />
						<el-table-column type="index" width="55" align="center" label="序号" />
						<el-table-column label="附件名称" prop="name" :show-overflow-tooltip="true" />
						<el-table-column label="类型" prop="type" :show-overflow-tooltip="true">
							<template slot-scope="scope">
								<div v-if="scope.row.type == '1'">操作说明</div>
								<div v-else>视频</div>
							</template>
						</el-table-column>
						<!-- <el-table-column label="状态" align="center" prop="state">
							<template slot-scope="scope">
								<div v-if="scope.row.state == '0'">未绑定</div>
								<div v-else>已绑定</div>
							</template>
						</el-table-column> -->
					</el-table>
					<pagination v-show="totalvedio > 0" :total="totalvedio" :page.sync="queryParamsvedio.pageNum" :limit.sync="queryParamsvedio.pageSize" @pagination="getVedioList" />
				</div>
				<div class="userCenter">
					<div @click="setRight"><i class="el-icon-right"></i></div>
					<div @click="setLeft"><i class="el-icon-back"></i></div>
				</div>
				<div class="userRight">
					<el-table :data="selectuserList" height="488px" ref="rightTable" @selection-change="handleBackUser" border>
						<el-table-column type="selection" width="50" align="center" />
						<el-table-column label="附件名称" prop="name" :show-overflow-tooltip="true" />
						<el-table-column label="类型" prop="type" :show-overflow-tooltip="true">
							<template slot-scope="scope">
								<div v-if="scope.row.type == '1'">操作说明</div>
								<div v-else>视频</div>
							</template>
						</el-table-column>
					</el-table>
				</div>
			</div>
			<!-- <el-table :row-key="getRowKeys" v-loading="loadingdialog" :data="vedioList" @selection-change="handleSelectionProduct" ref="multipleTable" row-class-name="pointer">
				<el-table-column type="selection" width="55" align="center" :reserve-selection="true" />
				<el-table-column type="index" width="55" align="center" label="序号" />
				<el-table-column label="附件名称" prop="name" min-width="130" :show-overflow-tooltip="true" />
				<el-table-column label="类型" prop="type" min-width="130" :show-overflow-tooltip="true" />
			</el-table>
			<pagination v-show="totalvedio > 0" :total="totalvedio" :page.sync="queryParamsvedio.pageNum" :limit.sync="queryParamsvedio.pageSize" @pagination="getVedioList" /> -->
			<div slot="footer" class="dialog-footer">
				<el-button type="primary" @click="submitBind">确 定</el-button>
				<el-button @click="cancel">取 消</el-button>
			</div>
		</el-dialog>
	</div>
</template>

<script>
import { menulist, bind, VedioList, getbind, OperationVideoMenuList } from "@/api/fileVedio/fileVedios"
import { mapGetters } from "vuex"
export default {
	name: "FileVedioSetting",
	dicts: ["sys_normal_disable"],
	computed: {
		...mapGetters(["sidebar"])
	},
	data() {
		return {
			eleTabTop: 0, //表格容器距浏览器顶部距离
			totalvedio: 0,
			loadingdialog: false,
			vedioList: [],
			// 遮罩层
			loading: true,
			// 选中数组
			ids: [],
			// 非单个禁用
			single: true,
			// 非多个禁用
			multiple: true,
			// 显示搜索条件
			showSearch: true,
			// 总条数
			total: 0,
			// 岗位表格数据
			postList: [],
			// 弹出层标题
			title: "",
			// 是否显示弹出层
			open: false,
			// 查询参数
			queryParams: {
				pageNum: 1,
				pageSize: 10,
				type: undefined
			},
			queryParamsvedio: {
				pageNum: 1,
				pageSize: 10,
				name: ""
			},
			// 表单参数
			form: {
				state: 0
			},
			// 表单校验
			rules: {
				type: [{ required: true, message: "上传类型不能为空", trigger: "blur" }]
			},
			// 重新渲染表格状态
			refreshTable: true,
			// 是否展开，默认全部折叠
			isExpandAll: false,
			selectVedio: [],
			menuIds: "",
			addSelectMenu: [],
			dateList: [],
			aa: [],
			selectuserList: [],
			SelectionUser: [],
			BackSelectionUser: [],
			types: ""
		}
	},
	created() {
		// this.getList()
	},
	mounted() {
		// 滚动条的获取
		this.handleScrollx()
		window.addEventListener("scroll", this.handleScrollx, true)
	},
	activated() {
		 this.getList()
		//获取表格容器距页面头部的距离
		this.handleScrollx()
	},
	destroyed() {
		window.removeEventListener("scroll", this.handleScrollx, true)
	},
	methods: {
		//获取表格容器距页面头部的距离
		handleScrollx() {
			this.eleTabTop = this.$refs.eleTab.getBoundingClientRect().top
		},
		handleBackUser(selection) {
			this.BackSelectionUser = selection
		},
		setLeft() {
			this.BackSelectionUser.forEach(item => {
				this.selectuserList.forEach((items, index) => {
					if (item.id == items.id) {
						this.selectuserList.splice(index, 1)
					}
				})
			})
		},
		setRight() {
			this.selectuserList.push(...this.SelectionUser)
			this.selectuserList = this.removeSame1(this.selectuserList)
			this.$refs.leftTable.clearSelection()
		},
		// 去重
		removeSame1(arr) {
			let map = new Map()
			for (let item of arr) {
				// map.has()方法判断map中是否存在这个键
				// 不存在，则将键和值同时设置到map集合中，
				if (!map.has(item.id)) {
					map.set(item.id, item)
				}
			}
			// 返回map的值
			return [...map.values()]
		},
		getRowKeys(row) {
			return row.id
		},
		cancel() {
			this.open = false
		},
		handleSelectionProduct(selection) {
			console.log(selection)
			this.SelectionUser = selection
			this.addSelectMenu = selection.map(item => item.id)
		},
		/** 展开/折叠操作 */
		toggleExpandAll() {
			this.refreshTable = false
			this.isExpandAll = !this.isExpandAll
			this.$nextTick(() => {
				this.refreshTable = true
			})
		},
		/** 查询岗位列表 */
		getList() {
			this.loading = true
			menulist(this.queryParams).then(response => {
				response.data.forEach(item => {
					if (item.menuName == "设备列表") {
						console.log(item, "查找数据")
					}
				})
				this.postList = this.handleTree(response.data, "menuId")
				this.loading = false
			})
		},
		// 取消按钮
		cancel() {
			this.open = false
			this.reset()
		},
		// 表单重置
		reset() {
			this.form = {
				id: undefined,
				state: 0,
				type: undefined,
				name: ""
			}
			this.resetForm("form")
		},
		/** 搜索按钮操作 */
		handleQuery() {
			this.queryParams.pageNum = 1
			this.getList()
		},
		/** 重置按钮操作 */
		resetQuery() {
			this.resetForm("queryForm")
			this.handleQuery()
		},
		// 多选框选中数据
		handleSelectionChange(selection) {
			this.ids = selection.map(item => item.id)
			this.single = selection.length != 1
			this.multiple = !selection.length
		},
		/** 搜索按钮操作 */
		handleQueryUser() {
			this.queryParamsvedio.pageNum = 1
			this.getVedioList()
		},
		/** 重置按钮操作 */
		resetQueryUser() {
			this.queryParamsvedio.name = undefined
			this.resetForm("queryParamsvedio")
			this.handleQueryUser()
		},
		getVedioList(status) {
			this.queryParamsvedio.type = status
			VedioList(this.queryParamsvedio).then(response => {
				this.vedioList = response.rows
				this.totalvedio = response.total
				this.loadingdialog = false
			})
		},
		/** 新增按钮操作 */
		handleAdd(row, status) {
			this.reset()
			this.open = true
			this.selectuserList = []
			this.menuIds = row.menuId
			this.types = status
			this.getbinds(row, status).then(res => {
				this.getVedioList(status)
			})
			this.title = "绑定视频文件"
		},
		getbinds(row, status) {
			return new Promise(resolve => {
				OperationVideoMenuList({
					menuId: row.menuId,
					type: status
				}).then(res => {
					this.selectuserList = res.rows
					resolve()
				})
			})
		},
		/** 修改按钮操作 */
		handleUpdate(row) {
			this.reset()
			const id = row.id || this.ids
			getVedio(id).then(response => {
				this.form = response.data
				this.open = true
				this.title = "修改说明"
			})
		},
		/** 提交按钮 */
		submitBind: function () {
			console.log(this.selectuserList)
			let form = {
				id: this.menuIds,
				ovids: this.selectuserList.map(item => item.ovideoId || item.id),
				type: this.types
			}
			bind(form).then(response => {
				this.$modal.msgSuccess("新增成功")
				this.open = false
				this.getList()
			})
		},
		/** 删除按钮操作 */
		handleDelete(row) {
			const postIds = row.id || this.ids
			this.$modal
				.confirm("是否确认删除此数据项？")
				.then(function () {
					return deleteVedio(postIds)
				})
				.then(() => {
					this.getList()
					this.$modal.msgSuccess("删除成功")
				})
				.catch(() => {})
		}
	}
}
</script>
<style scoped lang="scss">
.userDialog {
	display: flex;
	justify-content: space-between;
	align-items: center;
	.userLeft {
		width: 40%;
	}
	.userRight {
		width: 52%;
	}
	.userRight {
		padding-bottom: 3px;
	}
	.userCenter {
		> div:first-child {
			margin-bottom: 50px;
		}
		.el-icon-right,
		.el-icon-back {
			font-size: 30px !important;
		}
	}
}
</style>
